<template>
    <div>
        <!--轮播图-->
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(item,index) in lunbotuList" :key="item.url" v-if="index<=6&&index>=3">
                <img :src="item.url"/>
            </mt-swipe-item>
        </mt-swipe>
        <!--九宫格-->
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/home/newsList">
                   <img src="../../img/menu1.png"/>
                        <div class="mui-media-body">新闻资讯</div>
                    </router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photoList">
                    <img src="../../img/menu2.png"/>
                    <div class="mui-media-body">点一点</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../img/menu3.png"/>
                    <div class="mui-media-body">Chat</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../img/menu4.png"/>
                    <div class="mui-media-body">location</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../img/menu5.png"/>
                    <div class="mui-media-body">Search</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../img/menu6.png"/>
                    <div class="mui-media-body">Phone</div></a></li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default {
        data(){
            return{
              lunbotuList:[]//保存轮播图的数组
            };
        },
        created(){
            this.getLunbotu();
        },
        methods:{
            getLunbotu(){
                // 获取轮播图数据的方法https://tenapi.cn/img/acg.php
                //this.$http.get("https://www.apiopen.top/meituApi?page=1").then(result=>{
                this.$http.get("meituApi?page=1").then(result=>{//vue-resource前不能用/
                    if(result.body.code===200){
                        this.lunbotuList=result.body.data;
                    console.log(result.body);
                    }else{
                        //失败的
                        Toast("加载轮播图失败！")
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
 .mint-swipe{
    height: 200px;
     img{
       height: 100%;
         width:100%;
     }
}
    .mui-content{
        ul{
            background: #fff;
            border: none;
            img{
                height: 60px;
                width: 60px;
            }
            li .mui-media-body{
                font-size: 12px;
            }

        }

    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border: none;
    }
</style>